<template>
  <view v-if="shenheStatus == 0" class="page">
    <view class="page-content">
      <view class="content-body">
        <view class="title">{{ $t('facePay.setMoney') }}</view>
        <view class="input-section">
          <view>￥</view>
          <input v-model="money" type="digit" />
        </view>
        <view class="title addMargin">{{ $t(facePay.remark) }}</view>
        <view class="remark">
          <u-input
            v-model="remark"
            type="textarea"
            :auto-height="true"
            :placeholder="$t(facePay.addRemark)"
          />
        </view>
      </view>
      <view class="content-foot" :style="[btnStyle]" @click="handleConfirm()">{{
        $t('admin.confirm')
      }}</view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      money: '',
      remark: '',
      timer: null,
    };
  },
  computed: {
    btnStyle() {
      if (this.money) {
        return { color: '#FFFFFF', background: '#0EB5F8' };
      } else {
        return { color: '#999999', background: '#E0E0E0' };
      }
    },
  },
  onLoad(t) {},
  methods: {
    handleConfirm() {
      if (!this.money) return;
      let godoCb = () => {
        let data = {
          money: this.money,
          remark: this.remark,
        };
        try {
          // 利用本地缓存，当返回订单列表页时，进行页面刷新
          uni.setStorageSync('facePayData', JSON.stringify(data));
          uni.navigateBack();
        } catch (e) {
          // error
        }
      };
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          godoCb();
        }, 500);
      } else {
        this.timer = setTimeout(() => {
          godoCb();
        }, 500);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  min-height: 100vh;
  background-color: #f2f2f2;

  .page-content {
    width: 702rpx;
    margin: 0 auto;

    .content-body {
      width: 100%;
      background: #ffffff;
      border-radius: 14rpx;
      padding: 58rpx 50rpx 0 50rpx;

      .title {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #191919;
      }
      .addMargin {
        margin-top: 47rpx;
      }

      .input-section {
        display: flex;
        font-size: 78rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #191919;
        border-bottom: 1rpx solid #e5e5e5;
        view {
          width: 70rpx;
          text-align: left;
        }

        input {
          flex: 1;
          font-size: 112rpx;
          font-weight: 500;
          color: #191919;
          height: 120rpx;
        }
      }

      .remark {
        margin: 39rpx 0 48rpx 0;
        font-size: 28rpx;
      }
    }

    .content-foot {
      width: 100%;
      height: 90rpx;
      background: #e0e0e0;
      border-radius: 45rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
      margin-top: 60rpx;
    }
  }
}
</style>
